import React, { useEffect, useRef, useState, useCallback } from 'react';
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'; // Added .js to the import path
import { initializeApp } from 'firebase/app';
import { getAuth, signInAnonymously, signInWithCustomToken, onAuthStateChanged } from 'firebase/auth';
import { getFirestore, doc, setDoc, getDoc, onSnapshot } from 'firebase/firestore';

// Componente principal de la aplicación
function App() {
  const [activeModule, setActiveModule] = useState('overview');
  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
  const [userId, setUserId] = useState(null);
  const [isAuthReady, setIsAuthReady] = useState(false);
  const [db, setDb] = useState(null);
  const [auth, setAuth] = useState(null);
  const [userProgress, setUserProgress] = useState({});
  const [showModal, setShowModal] = useState(false);
  const [modalMessage, setModalMessage] = useState('');

  // Configuración de Firebase - ¡No modificar, se inyecta en tiempo de ejecución!
  const firebaseConfig = typeof __firebase_config !== 'undefined' ? JSON.parse(__firebase_config) : {};
  const appId = typeof __app_id !== 'undefined' ? __app_id : 'default-app-id';
  const initialAuthToken = typeof __initial_auth_token !== 'undefined' ? __initial_auth_token : null;

  // Inicialización de Firebase y autenticación
  useEffect(() => {
    try {
      const app = initializeApp(firebaseConfig);
      const firestoreDb = getFirestore(app);
      const firebaseAuth = getAuth(app);

      setDb(firestoreDb);
      setAuth(firebaseAuth);

      const unsubscribe = onAuthStateChanged(firebaseAuth, async (user) => {
        if (user) {
          setUserId(user.uid);
          setIsAuthReady(true);
        } else {
          // Si no hay token inicial, iniciar sesión anónimamente
          if (!initialAuthToken) {
            await signInAnonymously(firebaseAuth);
          }
          // El onAuthStateChanged se disparará de nuevo con el usuario anónimo
        }
      });

      // Si hay un token inicial, usarlo para iniciar sesión
      if (initialAuthToken) {
        signInWithCustomToken(firebaseAuth, initialAuthToken)
          .catch((error) => {
            console.error("Error signing in with custom token:", error);
            // Fallback a inicio de sesión anónimo si falla el token personalizado
            signInAnonymously(firebaseAuth).catch(console.error);
          });
      }

      return () => unsubscribe();
    } catch (error) {
      console.error("Error initializing Firebase:", error);
      setModalMessage("Error al inicializar Firebase. Algunas funcionalidades podrían no estar disponibles.");
      setShowModal(true);
    }
  }, [initialAuthToken, firebaseConfig]);

  // Cargar el progreso del usuario desde Firestore
  useEffect(() => {
    if (db && userId && isAuthReady) {
      const userDocRef = doc(db, `artifacts/${appId}/users/${userId}/digestive_progress`, 'progress');
      const unsubscribe = onSnapshot(userDocRef, (docSnap) => {
        if (docSnap.exists()) {
          setUserProgress(docSnap.data());
        } else {
          setUserProgress({}); // No hay progreso aún
        }
      }, (error) => {
        console.error("Error fetching user progress:", error);
        setModalMessage("Error al cargar el progreso del usuario.");
        setShowModal(true);
      });
      return () => unsubscribe();
    }
  }, [db, userId, isAuthReady, appId]);

  // Guardar el progreso del usuario en Firestore
  const saveUserProgress = useCallback(async (newProgress) => {
    if (db && userId && isAuthReady) {
      try {
        const userDocRef = doc(db, `artifacts/${appId}/users/${userId}/digestive_progress`, 'progress');
        await setDoc(userDocRef, newProgress, { merge: true });
        // Eliminado el mensaje de éxito del modal aquí
      } catch (error) {
        console.error("Error saving user progress:", error);
        setModalMessage("Error al guardar el progreso del usuario.");
        setShowModal(true);
      }
    } else {
      setModalMessage("No se pudo guardar el progreso. Autenticación no lista.");
      setShowModal(true);
    }
  }, [db, userId, isAuthReady, appId]);

  const handleModuleClick = (moduleName) => {
    setActiveModule(moduleName);
    setIsSidebarOpen(false); // Cerrar sidebar al seleccionar módulo
    // Ejemplo de cómo podrías guardar el progreso al cambiar de módulo
    saveUserProgress({ lastModuleVisited: moduleName });
  };

  const closeModal = () => setShowModal(false);

  return (
    // La estructura de la aplicación está diseñada para ser autocontenida y embeddable.
    // Puede ser montada en cualquier elemento DOM y se adaptará a su contenedor.
    <div className="min-h-screen flex flex-col bg-gradient-to-br from-blue-50 to-green-50 font-inter text-gray-800">
      {/* Modal de Mensajes */}
      {showModal && (
        <div className="fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center z-50">
          <div className="bg-white p-6 rounded-lg shadow-xl max-w-sm w-full text-center">
            <p className="text-lg mb-4">{modalMessage}</p>
            <button
              onClick={closeModal}
              className="bg-blue-600 text-white px-6 py-2 rounded-md hover:bg-blue-700 transition-colors duration-200"
            >
              Cerrar
            </button>
          </div>
        </div>
      )}

      {/* Encabezado */}
      <header className="bg-blue-700 text-white p-4 shadow-md flex justify-between items-center z-10">
        <div className="flex items-center">
          <button
            onClick={() => setIsSidebarOpen(!isSidebarOpen)}
            className="text-white focus:outline-none lg:hidden mr-4"
            aria-label="Abrir menú"
          >
            <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16"></path>
            </svg>
          </button>
          <h1 className="text-2xl font-bold">Anatomía Digestiva Interactiva</h1>
        </div>
        {userId && (
          <div className="text-sm bg-blue-800 px-3 py-1 rounded-full hidden sm:block">
            ID de Usuario: {userId}
          </div>
        )}
      </header>

      {/* Contenido Principal */}
      <div className="flex flex-1 overflow-hidden">
        {/* Barra Lateral (Sidebar) */}
        <aside
          className={`bg-blue-800 text-white w-64 p-4 flex-shrink-0 transition-transform duration-300 ease-in-out
            ${isSidebarOpen ? 'translate-x-0' : '-translate-x-full'} lg:translate-x-0 absolute lg:relative h-full z-20`}
        >
          <nav>
            <ul>
              <li className="mb-2">
                <button
                  onClick={() => handleModuleClick('overview')}
                  className={`block w-full text-left p-3 rounded-md transition-colors duration-200
                    ${activeModule === 'overview' ? 'bg-blue-600 font-semibold' : 'hover:bg-blue-700'}`}
                >
                  Visión General
                </button>
              </li>
              <li className="mb-2">
                <button
                  onClick={() => handleModuleClick('macroscopic')}
                  className={`block w-full text-left p-3 rounded-md transition-colors duration-200
                    ${activeModule === 'macroscopic' ? 'bg-blue-600 font-semibold' : 'hover:bg-blue-700'}`}
                >
                  Órganos Macroscópicos
                </button>
              </li>
              <li className="mb-2">
                <button
                  onClick={() => handleModuleClick('microanatomy')}
                  className={`block w-full text-left p-3 rounded-md transition-colors duration-200
                    ${activeModule === 'microanatomy' ? 'bg-blue-600 font-semibold' : 'hover:bg-blue-700'}`}
                >
                  Microanatomía e Histología
                </button>
              </li>
              <li className="mb-2">
                <button
                  onClick={() => handleModuleClick('vascularization')}
                  className={`block w-full text-left p-3 rounded-md transition-colors duration-200
                    ${activeModule === 'vascularization' ? 'bg-blue-600 font-semibold' : 'hover:bg-blue-700'}`}
                >
                  Vascularización y Drenaje Linfático
                </button>
              </li>
              <li className="mb-2">
                <button
                  onClick={() => handleModuleClick('3d-integration')}
                  className={`block w-full text-left p-3 rounded-md transition-colors duration-200
                    ${activeModule === '3d-integration' ? 'bg-blue-600 font-semibold' : 'hover:bg-blue-700'}`}
                >
                  Integración 3D y Capas
                </button>
              </li>
            </ul>
          </nav>
        </aside>

        {/* Área de Contenido Principal */}
        <main className="flex-1 p-6 overflow-y-auto">
          {activeModule === 'overview' && (
            <div className="bg-white p-6 rounded-lg shadow-lg">
              <h2 className="text-3xl font-bold text-blue-800 mb-4">Visión General del Sistema Digestivo</h2>
              <p className="text-lg mb-4">Explora el fascinante viaje de los alimentos a través de tu cuerpo.</p>
              <p className="mb-4">El sistema digestivo es un conjunto de órganos que trabajan en conjunto para transformar los alimentos que consumes en nutrientes que tu cuerpo puede usar para energía, crecimiento y reparación.</p>
              <p className="mb-4">Este módulo te ofrece un mapa interactivo del trayecto digestivo, destacando los principales órganos y sus funciones.</p>
              {/* Aquí iría el mapa esquemático interactivo */}
              <div className="bg-gray-100 p-4 rounded-md text-center text-gray-600 italic">
                [Mapa esquemático interactivo del trayecto digestivo con puntos interactivos]
              </div>
            </div>
          )}

          {activeModule === 'macroscopic' && (
            <div className="bg-white p-6 rounded-lg shadow-lg">
              <h2 className="text-3xl font-bold text-blue-800 mb-4">Órganos Macroscópicos</h2>
              <p className="text-lg mb-4">Sumérgete en la anatomía visible de cada componente del sistema digestivo.</p>
              <p className="mb-4">Desde la boca hasta el ano, cada órgano tiene una estructura única que le permite cumplir su función específica en la digestión.</p>
              <ul className="list-disc list-inside space-y-2 mb-4">
                <li><strong>Tubo Digestivo Principal:</strong>
                  <ul className="list-disc list-inside ml-5">
                    <li><strong>Boca:</strong> Dientes, lengua, glándulas salivales (parótida, submandibular, sublingual).</li>
                    <li><strong>Faringe:</strong> Nasofaringe, orofaringe, laringofaringe.</li>
                    <li><strong>Esófago:</strong> Tubo muscular que conecta la faringe con el estómago. Capas de la pared (mucosa, submucosa, muscular, adventicia/serosa).</li>
                    <li><strong>Estómago:</strong> Órgano en forma de J. Regiones anatómicas (cardias, fundus, cuerpo, antro pilórico, píloro). Curvaturas mayor y menor.</li>
                    <li><strong>Intestino Delgado:</strong> Tubo largo y enrollado.
                      <ul className="list-disc list-inside ml-5">
                        <li><strong>Duodeno:</strong> Primera sección, en forma de C.</li>
                        <li><strong>Yeyuno:</strong> Sección media, principal lugar de absorción.</li>
                        <li><strong>Íleon:</strong> Última sección, se une al intestino grueso.</li>
                      </ul>
                      Características: Pliegues circulares (válvulas de Kerckring), vellosidades y microvellosidades.
                    </li>
                    <li><strong>Intestino Grueso:</strong>
                      <ul className="list-disc list-inside ml-5">
                        <li><strong>Ciego:</strong> Bolsa inicial con el apéndice vermiforme.</li>
                        <li><strong>Colon:</strong> Ascendente, transverso, descendente, sigmoides. Haustras y tenias cólicas.</li>
                        <li><strong>Recto:</strong> Almacena heces antes de la defecación.</li>
                        <li><strong>Ano:</strong> Abertura terminal con esfínteres interno y externo.</li>
                      </ul>
                    </li>
                  </ul>
                </li>
                <li><strong>Órganos Accesorios:</strong>
                  <ul className="list-disc list-inside ml-5">
                    <li><strong>Hígado:</strong> Glándula más grande del cuerpo. Lobulillos hepáticos, vías biliares.</li>
                    <li><strong>Vesícula Biliar:</strong> Almacena y concentra la bilis.</li>
                    <li><strong>Páncreas:</strong> Glándula exocrina (enzimas digestivas) y endocrina (hormonas). Acinos pancreáticos y conductos.</li>
                  </ul>
                </li>
              </ul>
              {/* Aquí irían modelos 3D interactivos de órganos individuales */}
              <div className="bg-gray-100 p-4 rounded-md text-center text-gray-600 italic">
                [Modelos 3D interactivos de órganos individuales con hotspots y fichas informativas]
              </div>
            </div>
          )}

          {activeModule === 'microanatomy' && (
            <div className="bg-white p-6 rounded-lg shadow-lg">
              <h2 className="text-3xl font-bold text-blue-800 mb-4">Microanatomía e Histología</h2>
              <p className="text-lg mb-4">Explora el mundo microscópico de los tejidos digestivos.</p>
              <p className="mb-4">La función del sistema digestivo se basa en la intrincada estructura de sus células y tejidos, invisibles a simple vista.</p>
              <ul className="list-disc list-inside space-y-2 mb-4">
                <li><strong>Vellosidades y Microvellosidades:</strong> Propósito y estructura.</li>
                <li><strong>Criptas de Lieberkühn, Glándulas Gástricas y Acinos Pancreáticos.</strong></li>
              </ul>
              {/* Aquí irían cortes histológicos interactivos con zoom */}
              <div className="bg-gray-100 p-4 rounded-md text-center text-gray-600 italic">
                [Cortes histológicos interactivos con zoom, leyendas y herramienta de comparación]
              </div>
            </div>
          )}

          {activeModule === 'vascularization' && (
            <div className="bg-white p-6 rounded-lg shadow-lg">
              <h2 className="text-3xl font-bold text-blue-800 mb-4">Vascularización y Drenaje Linfático</h2>
              <p className="text-lg mb-4">Comprende cómo los nutrientes son transportados y cómo el sistema inmune protege el tracto digestivo.</p>
              <ul className="list-disc list-inside space-y-2 mb-4">
                <li><strong>Redes Arteriales y Venosas:</strong> Diagramas interactivos.</li>
                <li><strong>Plexos Nerviosos y Ganglios Linfáticos Asociados.</strong></li>
              </ul>
              {/* Aquí irían infografías interactivas */}
              <div className="bg-gray-100 p-4 rounded-md text-center text-gray-600 italic">
                [Infografías interactivas de rutas vasculares y linfáticas]
              </div>
            </div>
          )}

          {activeModule === '3d-integration' && (
            <div className="bg-white p-6 rounded-lg shadow-lg flex flex-col items-center justify-center">
              <h2 className="text-3xl font-bold text-blue-800 mb-4">Integración 3D y Capas Anatómicas</h2>
              <p className="text-lg mb-4 text-center">Manipula un modelo 3D completo del sistema digestivo, aislando órganos y explorando sus capas.</p>
              <p className="mb-4 text-center">Usa el ratón para rotar el modelo. Haz clic y arrastra para mover la cámara. Usa la rueda del ratón para hacer zoom.</p>
              <div className="w-full max-w-4xl h-96 bg-gray-200 rounded-lg shadow-inner overflow-hidden relative">
                <DigestiveSystem3D />
                {/* Controles para el modelo 3D (ej. selección de capas, cortes) */}
                <div className="absolute bottom-4 left-1/2 -translate-x-1/2 flex space-x-2 bg-white bg-opacity-80 p-2 rounded-lg shadow-md">
                  <button className="bg-green-500 text-white px-4 py-2 rounded-md text-sm hover:bg-green-600 transition-colors">Vista Externa</button>
                  <button className="bg-green-500 text-white px-4 py-2 rounded-md text-sm hover:bg-green-600 transition-colors">Corte Sagital</button>
                  <button className="bg-green-500 text-white px-4 py-2 rounded-md text-sm hover:bg-green-600 transition-colors">Capas Histológicas</button>
                </div>
              </div>
              <button
                onClick={() => saveUserProgress({ '3d_model_explored': true, 'last_3d_view': new Date().toISOString() })}
                className="mt-6 bg-purple-600 text-white px-6 py-3 rounded-lg shadow-md hover:bg-purple-700 transition-colors duration-200"
              >
                Marcar Exploración 3D
              </button>
              <p className="mt-4 text-sm text-gray-600">
                Progreso actual del usuario: {JSON.stringify(userProgress)}
              </p>
            </div>
          )}
        </main>
      </div>

      {/* Pie de página */}
      <footer className="bg-blue-700 text-white p-4 text-center text-sm shadow-inner mt-auto">
        © 2025 Sistema Digestivo Interactivo. Desarrollado con ❤️ para el aprendizaje.
      </footer>
    </div>
  );
}

// Componente para el renderizado 3D con Three.js
function DigestiveSystem3D() {
  const mountRef = useRef(null);

  useEffect(() => {
    const currentMount = mountRef.current;
    if (!currentMount) return;

    // Configuración de la escena
    const scene = new THREE.Scene();
    scene.background = new THREE.Color(0xf0f0f0); // Color de fondo claro

    // Configuración de la cámara
    const camera = new THREE.PerspectiveCamera(75, currentMount.clientWidth / currentMount.clientHeight, 0.1, 1000);
    camera.position.z = 5;

    // Configuración del renderizador
    const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(currentMount.clientWidth, currentMount.clientHeight);
    renderer.setPixelRatio(window.devicePixelRatio);
    currentMount.appendChild(renderer.domElement);

    // Añadir controles de órbita para interactividad
    const controls = new OrbitControls(camera, renderer.domElement);
    controls.enableDamping = true; // para un movimiento más suave
    controls.dampingFactor = 0.05;
    controls.screenSpacePanning = false;
    controls.minDistance = 2;
    controls.maxDistance = 10;

    // Añadir un modelo 3D de ejemplo (un cubo para representar un órgano)
    const geometry = new THREE.BoxGeometry(1, 1, 1);
    const material = new THREE.MeshPhongMaterial({ color: 0x007bff }); // Material con luz
    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

    // Añadir luces para que el modelo sea visible
    const ambientLight = new THREE.AmbientLight(0x404040); // Luz ambiental suave
    scene.add(ambientLight);

    const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8); // Luz direccional
    directionalLight.position.set(1, 1, 1).normalize();
    scene.add(directionalLight);

    // Función de animación
    const animate = () => {
      requestAnimationFrame(animate);
      controls.update(); // solo si enableDamping está activado
      renderer.render(scene, camera);
    };

    animate();

    // Manejar el redimensionamiento de la ventana
    const handleResize = () => {
      camera.aspect = currentMount.clientWidth / currentMount.clientHeight;
      camera.updateProjectionMatrix();
      renderer.setSize(currentMount.clientWidth, currentMount.clientHeight);
    };

    window.addEventListener('resize', handleResize);

    // Limpieza al desmontar el componente
    return () => {
      window.removeEventListener('resize', handleResize);
      if (currentMount) {
        currentMount.removeChild(renderer.domElement);
      }
      renderer.dispose();
      geometry.dispose();
      material.dispose();
      controls.dispose(); // Disponer de los controles de órbita
      // Limpiar la escena si es necesario, aunque Three.js suele manejarlo
    };
  }, []); // El array de dependencias vacío asegura que se ejecute una sola vez

  return <div ref={mountRef} className="w-full h-full" />;
}

export default App;